<template>
  <div>
    <a-flex justify="space-between" class="step-head" :align="'center'">
      <a-flex :align="'center'">
        <slot name="left"></slot>
        <a-divider type="vertical"></a-divider>
        <a-tag>
          {{ codeFormData.info.tableName }}
        </a-tag>
        {{ currentStep.title }}
      </a-flex>
      <a-flex :align="'center'">
        <a-flex :align="'center'" :gap="4">
          <a-dropdown trigger="click">
            <a-button>
              预览
              <DownOutlined class="text-[12px] text-gray-500" />
            </a-button>
            <template #overlay>
              <a-menu @click="onPreview" :items="codeMenus"></a-menu>
            </template>
          </a-dropdown>
        </a-flex>
        <a-divider type="vertical"></a-divider>
        <slot name="right"></slot>
      </a-flex>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { previewCode } from '@/api/modules/tool/gen/gen';
import { getTempId, openWindow } from '@/global/window/window';
import { codeMenus } from '@/views/modules/tool/gen/data/options';
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import PreviewVue from '../../../preview/Preview.vue';
import { currentStep } from '../../data/config';
import { codeFormData } from '../../data/data';

const getCode: any = inject('code')!;

const onPreview = async (info: MenuInfo) => {
  const code = getCode();
  const { data } = await previewCode(code, info.key as any);
  openWindow({
    title: '代码预览',
    component: markRaw(PreviewVue),
    data: data.data,
    id: getTempId(),
    dark: true,
  });
};
</script>

<style lang="scss" scoped>
.step-head {
  line-height: 36px;
  border-bottom: 1px solid var(--border-color);
  padding: 0 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-bottom: 8px;
}
:deep(.ant-card) {
  box-shadow: none;
}
</style>
